<template>
  <div>
    <div class="li_box" :class="{ is_disabled: isDisabled && !$route.query.isEnd }">
      <div class="li_out">
        <div class="li_name">
          <span class="idx">{{ sortIndex + 1 }}.</span>
          <span>{{ userInfoData.userName }}</span>
        </div>
        <div class="li_orgname" :title="userInfoData.orgName">{{ userInfoData.orgName }}</div>
        <div class="li_grade">
          <div class="list" v-for="(item, index) in dataReasonList" :key="index">
            <div
              :class="['btn', { active: item.reasonID === assessRank, disabled: isDisabled }]"
              @click.stop="changeOrder(item)">
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="li_score">
          <span
            v-if="
              userInfoData.leaderAssessRank &&
              queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS') &&
              queryRouter.busSign !== 'DEAL_MAIN_LEADER_ASSESS_03'
            ">
            <!-- 总分预估：{{ estimateTotalScore }} -->
            <span v-if="queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_11'">分管负责人已评：</span>
            <span v-else-if="queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_10'">部门负责人已评：</span>
            <span v-else>分管领导已评：</span>
            {{ userInfoData.leaderAssessRank | AssessRank }}
            <i class="el-icon-warning tip_icon" @click.stop="checkScore"></i>
          </span>
        </div>
        <div
          class="li_equal"
          v-if="userInfoData.status == 0"
          @click.stop="warnPerson(1)"
          :style="userInfoData.isUrge == '0' ? 'color: #D7D7D7;' : ''">
          <span v-if="userInfoData.isUrge == '0'">已催报</span>
          <span v-else>催报</span>
        </div>
        <div class="li_equal li_eaual_eva" @click.stop="estimateShow = !estimateShow" v-else>领导点评</div>
      </div>
      <div class="li_side" v-if="estimateShow">
        <div class="grade_score" v-if="assessRank == '4'">
          <div class="reason_con">
            <span class="s_label">备注</span>
            <el-input
              v-model="reason"
              size="small"
              placeholder="请输入较差的原因"
              class="reason_ipt"
              :disabled="isDisabled"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"></el-input>
          </div>
        </div>
        <!-- 表现 -->
        <div class="entry_list">
          <div class="title_main_one">承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现</div>
          <el-input
            placeholder="请输入承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现"
            type="textarea"
            v-model="scoringExpressionVO.expression"
            size="small"
            :disabled="isDisabled"
            :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
        </div>

        <!-- 领导点评 -->
        <div class="entry_list">
          <div class="title_main_one">
            领导点评
            <span v-if="assessRank == '3'">（等次为“一般”时，需要填写说明）</span>
          </div>
          <el-input
            placeholder="请输入领导点评"
            type="textarea"
            v-model="scoringSuggestVO.suggestion"
            size="small"
            :autosize="{ minRows: 5, maxRows: 10 }"
            :disabled="isDisabled"></el-input>
        </div>
      </div>
    </div>
    <ClacScoreDialog ref="clacScoreDialog" :addSubList="addSubList" />
    <LeaderEvaDialog ref="leaderEvaDialog" :userInfoData="userInfoData" />
    <XnDialog
      custom-class="branch_dialog"
      title="总分预估"
      :visible.sync="detailtableShow"
      @close="detailtableShow = false">
      <div class="dialog-box_bottom">
        <div class="score-table">
          <div class="tab-th">
            <div class="li"></div>
            <div class="li leader-scoer" v-if="isShowChargeLender === 1">
              <span v-if="queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_11'">分管负责人评分</span>
              <span v-else-if="queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_10'">部门负责人评分</span>
              <span v-else>分管领导评分</span>
            </div>
            <div class="li" v-if="needPeopleAssess">民主测评</div>
            <div class="li" v-if="needPlusMinusPoints">加分与扣分</div>
            <div class="li leader-scoer">
              <span v-if="queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_11'">单位主要负责人评分</span>
              <span v-else-if="queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_10'">分管负责人评分</span>
              <span v-else>主要领导评分</span>
            </div>
            <div class="li">总分预计</div>
          </div>
          <div class="tab-tr">
            <div class="li">各项得分</div>
            <div class="li leader-scoer" v-if="isShowChargeLender === 1">
              {{ userInfoData.leaderAssessScore }}*{{ getRadio(0) }}
              <!-- <span v-if="userInfoData.leaderAssessRank">(等次:{{ formatSex(userInfoData.leaderAssessRank) }})</span> -->
              <i
                class="el-icon-info"
                @click.stop="clickEva"
                v-if="
                  userInfoData.leaderScoringExpressionVO ||
                  userInfoData.leaderScoringSuggestVO ||
                  userInfoData.leaderRemark
                "></i>
            </div>
            <div class="li" v-if="needPeopleAssess">{{ userInfoData.peopleAssessScore }}*{{ getRadio(1) }}</div>
            <div class="li calc" v-if="needPlusMinusPoints">
              {{ userInfoData.calcScore || '无' }}
              <i class="el-icon-info" @click.stop="clickCalc"></i>
            </div>
            <div class="li leader-scoer">
              <span class="score">{{ totalScore }}</span>
              *{{ getRadio(2) }}
              <!-- *{{ isShowChargeLender == 1 ? '20%' : isShowChargeLender == 3 ? '50%' : '60%' }} -->
            </div>
            <div class="li">{{ estimateTotalScore }}</div>
          </div>
        </div>
        <el-button type="primary" size="small" @click.stop="detailtableShow = false">关闭</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import ClacScoreDialog from './calcScoreDialog.vue'
import LeaderEvaDialog from './leaderEvaDialog'
import XnDialog from '@com/xnDialog.vue'
import { getCalcScoreByUserId, saveUrgeByNeedDeal } from '@apis/evaluation.js'
export default {
  name: 'optionListLi',
  components: { ClacScoreDialog, LeaderEvaDialog, XnDialog },
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
    sortIndex: {
      type: Number,
      default: 0,
    },
    rollListAll: {
      type: Array,
      default: () => {
        return []
      },
    },
    goodNum: {
      type: Number,
      default: 0,
    },
    groupByLeader: {
      type: Boolean,
      default: false,
    },
    calcRule: {
      type: Array,
      default: () => {
        return []
      },
    },
    needPlusMinusPoints: {
      type: Boolean,
      default: false,
    },
    needPeopleAssess: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataReasonList: [
        { label: '好', reasonID: '1' },
        { label: '较好', reasonID: '2' },
        { label: '一般', reasonID: '3' },
        { label: '较差', reasonID: '4' },
      ],
      // 评分标准显示隐藏
      criteriaShow: false,
      addSubList: [],
      assessRank: '',
      reason: '',
      isDisabled: false,
      estimateShow: false,
      // 承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现
      scoringExpressionVO: {
        expression: '',
        voiceList: [],
      },
      // 领导点评
      scoringSuggestVO: {
        suggestion: '',
        voiceList: [],
      },
      userInfoData: {},
      detailtableShow: false,
      totalScore: 0,
      estimateTotalScore: 0,
      queryRouter: {},
      isGood: true,
    }
  },
  computed: {
    // 是否显示分管领导评分
    isShowChargeLender() {
      const row = this.userInfoData
      /**
       * isLeaderMain:0 上级领导不是主要领导 1上级领导是主要领导
       * isOneLeader:0 有多个分管领导 1 只有一个领导(按照6 4)
       */
      if (row.isLeaderMain === 0 && row.isOneLeader === 0) {
        // 有分管领导以及主要领导 442
        return 1
      } else if (/* row.isLeaderMain === 1 &&  */ row.isOneLeader === 1) {
        // 分管领导和主要领导是一个人 46
        return 2
      } else if ((row.isLeaderMain === 1 && row.isOneLeader === 0) || row.isMainLead === 1) {
        // 有分管领导和主要领导是一个人 55
        return 3
      } else {
        return ''
      }
    },
  },
  watch: {
    userInfo: {
      handler(news) {
        this.userInfoData = news
        if (this.userInfoData.scoringSuggestVO) {
          this.scoringSuggestVO = this.userInfoData.scoringSuggestVO
        } else {
          this.scoringSuggestVO = {
            suggestion: '',
            voiceList: [],
          }
        }
        if (this.userInfoData.scoringExpressionVO) {
          this.scoringExpressionVO = this.userInfoData.scoringExpressionVO
        } else {
          this.scoringExpressionVO = {
            expression: '',
            voiceList: [],
          }
        }
        if (this.userInfoData.status === '0' || this.userInfoData.status === '3') {
          this.isDisabled = true
        } else {
          this.isDisabled = false
        }
        this.assessRank = this.userInfoData.assessRank || this.userInfoData.mainLeaderAssessRank
        this.reason = this.userInfoData.remark
      },
      deep: true,
      immediate: true,
    },
    assessRank: {
      handler(news) {
        this.$nextTick(() => {
          this.assessFilter(news)
        })
      },
      deep: true,
      immediate: true,
    },
    reason: {
      handler(news) {
        this.userInfoData.remark = news
      },
      deep: true,
      immediate: true,
    },
    rollListAll: {
      handler(news) {
        const arr = news.filter(item => {
          return item.assessRank === '1' || (!item.assessRank && item.mainLeaderAssessRank === '1')
        })
        if (arr.length < this.goodNum) {
          this.isGood = true
        } else {
          this.isGood = false
        }
      },
      deep: true,
      immediate: true,
    },
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'

        default:
          break
      }
    },
  },
  created() {
    this.queryRouter = this.$route.query
  },
  mounted() {},
  methods: {
    ...mapMutations('evaluation', ['setEvSelectUserList', 'setChangeUserID']),
    // 查看评分标准
    lookCriteria() {
      this.criteriaShow = true
    },
    // 关闭评分标准
    closeCriteria() {
      this.criteriaShow = false
    },
    // 显示等次
    formatSex(value) {
      const obj = this.dataReasonList.find(item => item.reasonID === value)
      if (obj && obj.label) {
        return obj.label
      } else {
        return ''
      }
    },
    // 总分预估
    totalScoreDeal() {
      const row = this.userInfoData
      this.estimateTotalScore =
        (
          row.leaderAssessScore * this.calcRule[0] +
          row.calcScore * this.calcRule[3] +
          row.mainLeaderAssessScore * this.calcRule[2] +
          row.peopleAssessScore * this.calcRule[1]
        ).toFixed(1) * 1 || 0
      // 有分管领导
      // if (row.isLeaderMain === 0 && row.isOneLeader === 0) {
      //   this.estimateTotalScore =
      //     (
      //       row.leaderAssessScore * 0.4 +
      //       row.peopleAssessScore * 0.4 +
      //       row.calcScore * 1 +
      //       row.mainLeaderAssessScore * 0.2
      //     ).toFixed(1) * 1 || 0

      //   // return
      // } else if (/* row.isLeaderMain === 1 && */ row.isOneLeader === 1) {
      //   // 有分管领导和主要领导是一个人
      //   this.estimateTotalScore =
      //     (row.mainLeaderAssessScore * 0.6 + row.peopleAssessScore * 0.4 + row.calcScore * 1).toFixed(1) * 1 || 0
      // } else if ((row.isLeaderMain === 1 && row.isOneLeader === 0) || row.isMainLead === 1) {
      //   // 有分管领导和主要领导是一个人
      //   this.estimateTotalScore =
      //     (row.mainLeaderAssessScore * 0.5 + row.peopleAssessScore * 0.5 + row.calcScore * 1).toFixed(1) * 1 || 0
      // }
    },
    statusClass(status) {
      // 2为已评分，1为待评分，0为未小结
      let className = ''
      switch (status * 1) {
        case 1:
          className = 'not_reviewed'
          break
        case 2:
          className = 'reviewed'
          break
        default:
          break
      }
      return className
    },
    clickCalc() {
      getCalcScoreByUserId({
        needId: this.$route.query.needId,
        userId: this.userInfoData.userId,
      }).then(res => {
        if (res.status === 200) {
          this.addSubList = res.data
          if (this.addSubList.length > 0) {
            this.$refs.clacScoreDialog.calcDetailShow = true
          } else {
            this.$message.info('该成员暂无加分与扣分数据')
          }
        }
      })
    },
    // 等次建议
    changeOrder(item) {
      if (this.isDisabled) return
      if (Number(this.userInfoData.status === 0)) return
      if (!this.userInfoData.leaderAssessRank && this.queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')) {
        if (this.queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_11') {
          return this.$message.warning('分管负责人未评分')
        } else if (this.queryRouter.busSign === 'DEAL_MAIN_LEADER_ASSESS_10') {
          return this.$message.warning('部门负责人未评分')
        } else {
          return this.$message.warning('分管领导未评分')
        }
      }
      if (this.assessRank === item.reasonID) return
      if (item.reasonID === '1' && !this.isGood) {
        const str = `本次拟评价“好”等次${this.goodNum}人，现已${this.goodNum}人，如需评定为“好”，请更改其他评价`
        return this.$message.warning(str)
      }
      this.assessRank = item.reasonID
      if (item.reasonID === '3' || item.reasonID === '4') {
        this.estimateShow = true
      }
      if (item.reasonID === '3') {
        this.$confirm('等次为“一般”时，需要填写说明。', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
        }).then(() => {})
      }
      if (item.reasonID === '4') {
        this.$confirm('等次为“较差”时，需要说明原因。', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
        })
          .then(() => {
            this.reason = ''
          })
          .catch(() => {
            this.reason = ''
          })
      }
    },
    checkScore() {
      this.detailtableShow = true
    },
    assessFilter(news) {
      if (news === '1') {
        this.totalScore = 100
      } else if (news === '2') {
        this.totalScore = 80
      } else if (news === '3') {
        this.totalScore = 60
      } else if (news === '4') {
        this.totalScore = 0
      }
      this.userInfoData.assessRank = news
      this.userInfoData.totalScore = this.totalScore
      this.userInfoData.mainLeaderAssessScore = this.totalScore
      if (this.queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')) {
        this.totalScoreDeal()
      } else {
        this.estimateTotalScore = this.totalScore
      }
    },
    // 催报
    warnPerson(type) {
      this.$confirm('您确定要进行催报吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.saveUrgeData(type)
        })
        .catch(() => {})
    },
    // 催报方法
    saveUrgeData(type) {
      saveUrgeByNeedDeal({
        type: type,
        urgeUserId: this.userInfoData.userId,
        needId: this.$route.query.needId,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.status === 200) {
          this.userInfoData.isUrge = '0'
          this.$message({
            message: '催报成功',
            type: 'success',
          })
          this.setChangeUserID(this.userInfoData.userId)
        }
      })
    },
    clickEva() {
      this.$refs.leaderEvaDialog.leaderEvaShow = true
    },
    getRadio(idx) {
      return this.calcRule[idx] * 100 + '%'
    },
  },
}
</script>

<style lang="scss" scoped>
.li_box {
  padding-right: 25px;
  padding-left: 25px;
  // margin: 10px 0;
  .li_out {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .li_name {
      width: 100px;
      min-width: 100px;
      font-weight: 600;
      margin-right: 5px;
      display: flex;
    }
    .li_orgname {
      width: 100px;
      min-width: 100px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .li_grade {
      flex: 1;
      display: flex;
      justify-content: center;
      margin: 0 5px;
      width: 0;
      .list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 45px;
        .btn {
          width: 75px;
          height: 35px;
          line-height: 35px;
          font-size: 14px;
          text-align: center;
          border-radius: 4px;
          border: 1px solid #ccc;
          cursor: pointer;
          // margin-bottom: 5px;
          color: #333;
          &.active {
            background-color: #e3c79f;
            color: #fff;
            border-color: #e3c79f;
          }
          &.disabled {
            cursor: not-allowed;
          }
        }
        .score_section {
          font-size: 12px;
        }
      }
    }
    .li_score {
      width: 200px;
      min-width: 200px;
      font-weight: 600;
      color: #e0c699;
      .tip_icon {
        color: #409eff;
        cursor: pointer;
      }
    }
    .li_equal {
      color: #377cff;
      cursor: pointer;
      width: 80px;
      min-width: 80px;
      text-align: right;
    }
  }
  .li_side {
    .grade_score {
      flex: 1;
      width: 100%;
      margin-bottom: 20px;
      padding: 0 10px;
      .reason_con {
        display: flex;
        align-items: center;
        font-size: 15px;
        .s_label {
          margin-right: 10px;
          width: 40px;
          font-size: 16px;
        }
        .number_ipt {
          margin-right: 5px;
          width: 100px;
        }
        .reason_ipt {
          flex: 1;
          width: 100px;
        }
        .number_ipt {
          font-size: 15px;
          /deep/.el-input {
            font-size: inherit !important;
          }
        }
      }
      .reason_con {
        margin-top: 5px;
      }
    }
    .entry_list {
      padding: 0 10px;
      margin-bottom: 20px;
      margin-top: 20px;
      .title_main_one {
        font-size: 16px;
        font-weight: 600;
        border-left: 3px solid #fe6b6e;
        padding-left: 10px;
        margin-bottom: 20px;
        .top_require {
          color: #ff0000;
        }
        .tips {
          color: #666;
          font-size: 14px;
          font-weight: normal;
        }
        span {
          color: #999;
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
  }
}
.is_disabled {
  color: #999999;
  .active {
    background-color: #eeeeee !important;
    border-color: #eeeeee !important;
  }
  .disabled {
    cursor: not-allowed;
    color: #999999 !important;
  }
  .li_score {
    span {
      color: #cccccc;
    }
    .tip_icon {
      color: #cccccc !important;
    }
  }
  .li_eaual_eva {
    color: #cccccc !important;
  }
}
.branch_dialog {
  text-align: center;
  /deep/.el-dialog__body {
    min-height: 0;
    padding: 25px;
  }
  .score-table {
    border: 1px solid #333;
    margin-bottom: 30px;
    margin-right: 10px;
    .tab-th,
    .tab-tr {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #333;
      .li {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        font-size: 14px;
        &:not(:last-of-type) {
          border-right: 1px solid #333;
        }
        &.leader-scoer {
          flex: 1;
          .score {
            color: #a30014;
          }
          position: relative;
          .el-icon-info {
            position: absolute;
            right: 0;
            bottom: 0;
            color: #999;
            cursor: pointer;
            font-size: 16px;
          }
        }
      }
    }
    .tab-th {
      font-weight: 600;
    }
    .tab-tr {
      border-bottom: 0;
      .calc {
        position: relative;
        .el-icon-info {
          position: absolute;
          right: 0;
          bottom: 0;
          color: #999;
          cursor: pointer;
          font-size: 16px;
        }
      }
    }
  }
  .dialog-box_bottom {
    text-align: center;
  }
}
@media screen and (max-width: 1700px) {
  .li_box {
    padding: 0 5px !important;
    font-size: 14px;
    .li_out {
      .li_orgname {
        width: 80px;
        min-width: 80px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .li_grade {
        .list {
          margin-right: 20px;
          .btn {
            width: 65px;
          }
        }
      }
      .li_score {
        width: 100px;
        min-width: 100px;
      }
    }
  }
}
</style>
